<template>
  <div>
    <div class="card-wrap flex-column justify-end card-padding">
      <el-form :model="form" ref="carMessage" label-width="140px" :rules="type !=='detail'?rules:{}">
        <div class="card-title-wrap">
          <span>双方基础信息</span>
          <span></span>
        </div>
        <div style="box-sizing: border-box;padding-left: 20px;">
          <el-row>
            <el-col :span="8">
              <el-form-item label="车辆品牌:" prop="carBrandName" style="width: 80%;">
                <span>{{form.carBrandName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车型:" prop="carModelName" style="width: 80%;">
                <span>{{form.carModelName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车系:" prop="carSeriesName" style="width: 80%;">
                <span>{{form.carSeriesName}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="燃油类型:" prop="carFuelType" style="width: 80%;">
                <span>{{form.carFuelType}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="变速类型:" prop="carTransmission" style="width: 80%;">
                <span>{{form.carTransmission}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="排放标准:" prop="carDisplacement" style="width: 80%;">
                <span>{{form.carDisplacement}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="发动机号:" prop="engineNo" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.engineNo"></el-input>
                <span v-if="type=='detail'">{{form.engineNo}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车架号:" prop="carVin" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.carVin"></el-input>
                <span v-if="type=='detail'">{{form.carVin}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合格证:" prop="qualifiedCardFile">
                <ImageCommon :up-type="2" info="选择附件" :limit="1" v-model="form.qualifiedCardFile" :disabled="type=='detail'"></ImageCommon>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="附件:" prop="file">
                <ImageCommon :up-type="2" info="选择附件" :limit="5" v-model="form.file" :disabled="type=='detail'"></ImageCommon>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </div>
</template>
  <script>
export default {
  name: "carMessage",
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },
  computed: {
    form: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
    type() {
      let status;
      switch (this.state) {
        case "write":
          status = "edit";
          break;
        case "disabled":
          status = "detail";
          break;
        case "readonly":
          status = "detail";
          break;
        case "detail":
          status = "detail";
          break;
        case "edit":
          status = "edit";
        case "add":
          status = "add";
          break;
      }
      return status;
    },
  },
  data() {
    return {
      rules: {
        carVin: [{ required: true, message: "请输入车架号", trigger: "blur" }],
        qualifiedCardFile: [{ required: true, message: "请上传合格证", trigger: "blur" }],
        engineNo: [
          { required: true, message: "请输入发动机号码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleInput(str) {
      let msg = /^[\u4e00-\u9fa5a-zA-Z0-9]*$/
      if (!msg.test(this.form[str])) {
        this.form[str] = "";
      }
    },
    valid() {
      return new Promise(async (resolve) => {
        let result = true;
        let refs = Object.values(this.$refs);
        for (let index = 0; index < refs?.length; index++) {
          const ref = refs[index];
          if (Object.prototype.toString.call(ref) == "[object Array]") {
            for (let i = 0; i < ref.length; i++) {
              const element = ref[i];
              if (element?.valid) {
                let rc = await element?.valid?.();
                result = result && rc;
              }
              if (element?.validate) {
                let rf = await this._valid(ref);
                result = result && rf;
              }
              if (element?.form_validate) {
                let rf = await this._valid(ref, "form_validate");
                result = result && rf;
              }
            }
          } else {
            if (ref?.valid) {
              let rc = await ref?.valid?.();
              result = result && rc;
            }
            if (ref?.validate) {
              let rf = await this._valid(ref);
              result = result && rf;
            }
            if (ref?.form_validate) {
              let rf = await this._valid(ref, "form_validate");
              result = result && rf;
            }
          }
        }
        resolve(result);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  .title {
    border-left: 3px solid #3280fc;
    padding-left: 5px;
    box-sizing: border-box;
  }
}
.app-container {
  background-color: #fff;
}
</style>
